<template>
  <div>
      <card :dis-hover="true">
        <p slot="title">
          <Icon type="ios-film-outline"></Icon>
          文章列表
        </p>

        <div style="margin-bottom: 10px;">
          <tree-select :data="categoryTree.data" placeholder="文章栏目" style="width:250px;" v-model="categoryTree.selectedData" :expand-all="true" check-strictly></tree-select>
          <Input clearable placeholder="文章标题" v-model="query.title" style="width: 250px;margin-left: 10px;" />
          <Button type="primary" icon="ios-search" @click="searchArticle" style="margin-left: 10px;">查询</Button>
          <Button type="primary" icon="ios-add" @click="toAddModel" style="margin-left: 10px;">发表文章</Button>
        </div>

        <Table :loading="table.loading" :columns="table.columns" :data="table.data" stripe border ref="selection" @on-delete="handleDelete" @on-select="handleSelect"></Table>
        <Page :total="query.totalRecord" show-total :pageSize="query.pageSize" @on-change="pageChange" show-sizer @on-page-size-change="pageSizeChange"
              v-show="table.operation.success"></Page>
      </card>
      <card v-show="!table.operation.success">
        {{table.operation.message}}
      </card>
  </div>
</template>
<script>
  import categoryApi from '@/api/category'
  import articleApi from '@/api/article'
  import Tinymce from "../../components/tinymce/index";
  import TreeSelect from "../../components/tree-select/tree-select";
  import siteApi from '@/api/site'

  export default {
    components: {TreeSelect, Tinymce},
    data() {
      return {
        query: {
          title: '',
          categoryIds: [0],
          totalRecord: 0,
          pageSize: 10,
          pageNumber: 1
        },
        table: {
          loading: false,
          columns: [
            {
              type: 'selection',
              width: 60,
              align: 'center'
            },
            {title: '标题', key: 'title'},
            {title: '关键字', key: 'keywords'},
            {title: '发表时间', key: 'addTimeText'},
            {title: '状态', key: 'status',render: (h, params) => {
              let article = this.table.data[params.index]
                let type = 'success'
                let lable = '已发表'
                if(article.status == "AUDIT") {
                  type = 'warning'
                  lable = '审核中'
                }else if(article.status == "DELETE"){
                  type = 'dashed'
                  lable = '已删除'
                }
                return h('div', [
                  h('Button', {
                  props: {
                    type: type,
                    size: 'small'
                  }
                }, lable)
                ])
              }
            },
            {title: '阅读量', key: 'hits'},
            {
              title: '操作',
              key: 'handle',
              render: (h, params) => {
                return h('div', [
                  h('Button', {
                    props: {
                      type: 'primary',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.toEditModel(params.index);
                      }
                    }
                  }, '修改'),
                  h('Button', {
                    props: {
                      type: 'warning',
                      size: 'small'
                    },
                    style: {
                      marginRight: '5px'
                    },
                    on: {
                      click: () => {
                        this.handleDelete(params.index);
                      }
                    }
                  }, '删除'),
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    },
                    on: {
                      click: () => {
                        this.handleFlushDelete(params.index);
                      }
                    }
                  }, '彻底删除')
                ]);
              }
            }
          ],
          data: [],
          operation: {
            success: true,
            message: ""
          }
        },
        totalRecord: 0,
        pageSize: 15,
        pageNum: 1,

        categoryTree: {
          data: [],
          selectedData: [],
          operation: {
            success: true,
            message: ""
          }
        },

        loading: false
      }
    },
    created() {
      this.init();
    },

    methods: {

      init(){
        // 加载栏目树
        this.searchCategoryTree();
      },
      searchCategoryTree(){
        let self = this;
        categoryApi.getCategoryTree().then(function (res) {
          if (!res.data.success) {
            self.setTreeMessage(res.data.status.message);
          } else {
            self.categoryTree.data = res.data.data;
          }
        }).catch(function (error) {
          self.setTreeMessage(error.message);
        });
      },
      searchArticle() {
        if(siteApi.getCurrentSiteID() == null || siteApi.getCurrentSiteID() == ''){
          this.$Message.error('请选择站点');
          return
        }
        this.table.loading = true;
        let self = this;
        this.query.categoryIds = this.categoryTree.selectedData;
        articleApi.commonSearch(this.query).then(function (res) {
          console.info(res);
          self.table.loading = false;
          if (!res.data.success) {
            self.setTableMessage(res.data.status.message);
          } else {
            self.table.data = res.data.data.datas;
            self.query.totalRecord = res.data.data.total;
            self.query.pageSize = res.data.data.pageSize;
            self.query.pageNumber = res.data.data.pageNum;

            self.table.operation.success = true;
            self.table.operation.message = '';
          }
        }).catch(function (error) {
          self.setTableMessage(error.message);
        });
      },
      toAddModel() {
        if(siteApi.getCurrentSiteID() == null || siteApi.getCurrentSiteID() == ''){
          this.$Message.error('请选择站点');
          return
        }
        this.$router.push({ path: '/content/article/edit', params: { id:0 }})
      },

      toEditModel(index) {
        this.$router.push({ path: '/content/article/edit', query: { id:this.table.data[index].id }})
      },
      setTableMessage(message) {
        this.table.operation.success = false;
        this.table.operation.message = message;
      },
      setTreeMessage(message) {
        this.categoryTree.operation.success = false;
        this.categoryTree.operation.message = message;
      },
      handleDelete (index) {
        let self = this;
        this.$Modal.confirm({
          title: '确定要删除这条记录吗？',
          onOk: () => {
            articleApi.delete(this.table.data[index].id).then(function (res) {
              let result = res.data;
              if(result.success){
                self.$Message.info('删除成功');
                self.searchArticle();
              }else {
                self.$Message.error('删除失败');
              }
            });
          }
        });
      },

      handleFlushDelete (index) {
        let self = this;
        this.$Modal.confirm({
          title: '删除后不能恢复，确定删除吗？',
          onOk: () => {
            articleApi.flushDelete(this.table.data[index].id).then(function (res) {
              let result = res.data;
              if(result.success){
                self.$Message.info('删除成功');
                self.searchArticle();
              }else {
                self.$Message.error('删除失败');
              }
            });
          }
        });
      },

      handleSelect(selection,row){
        console.info(selection);
        console.info(this.$refs.selection.getSelection());
      },
      pageChange(pageNum){
        this.query.pageNumber = pageNum;
        this.searchArticle();
      },
      pageSizeChange(pageSize){
        this.query.pageSize = pageSize;
        this.searchArticle();
      }
    }
  }
</script>

<style lang="less">
  .ivu-page {
    margin-top: 10px;
  }
</style>
